<div class="page-title">
    <img src="svg_img/sms_black.svg">
    <h1 data-trans="sms"></h1>
</div>
<div id="innerContainer">
    <div class="table-container">
        <div id="simMsglist-main">
            <form id="simMsgListForm">
                <div class="simMsgList-btns smslist-btns">
                    <div class="row mb-3">
                        <div class="col-md-9 col-6">
                            <input type="button" id="simMsgList-delete" onclick="deleteSelectedSimMsgClickHandler()" class="btn btn-primary disabled" disabled="disabled" data-trans="delete"/>
                        </div>
                        <div class="col-md-3 col-6">
                            <select class="form-control form-select" onchange="smsUtil.changeLocationHandler(this);">
                                <option data-trans="smslist" value="device"></option>
                                <option data-trans="sim_messages" value="sim" selected="selected"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="width100p overflow-only-y" id="simMsgTableContainer">
                    <table class="table table-striped table-hover ko-grid table-fixed">
                        <thead>
                        <tr>
                            <th width="20" class="text-center">
                                <input class="form-check-input" type="checkbox" id="checkbox-all"/>
                            </th>
                            <th width="200"data-trans="phone_number" class=""></th>
                            <th  data-trans="content" class="text-center"></th>
                            <th width="200" data-trans="time" class="text-center"></th>
                        </tr>
                        </thead>
                        <tbody id="simMsgList_container">
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/x-jquery-tmpl" id="simMsgListTmpl">
{{each(i, sms) data }}
    <tr class="smslist-item simMsgList-item-class-${id}" id="simMsgList-item-${itemId}">
        <td>
            <div class="smslist-item-checkbox">
                <input type="checkbox" class="form-check-input" target="simMsgList-checkAll" name="msgId" id="checkbox${id}" value="${id}" number="${number}" number="${number}" />
            </div>
        </td>
        <td>
            {{if name.length == 0}}
                {{if number.length > 15}}
                    <div class="smslist-item-name pull-left">${number.substring(0,15)+"..."}</div>
                {{else}}
                     <div class="smslist-item-name pull-left">${number}</div>
                {{/if}}
            {{else}}
                <div class="smslist-item-name pull-left">${name}</div>
            {{/if}}
        </td>
        <td class="cursorhand" title="${content}">
            <div class="sms-table-content smslist-item-msg">${content}</div>
        </td>
        <td class="text-center"><span class="clock-time ${tag==2||tag==3?'hide':''}">${time}</span></td>
    </tr>
{{/each}}
</script>
